import React, { Component } from "react";
import { View, Text, Image, StyleSheet, ScrollView, TouchableWithoutFeedback, FlatList,ActivityIndicator} from "react-native";
import * as RootNavigation from '../../../App'
import { height } from "../../util/apdater_util";
import NetUtil from '../../net/net_util'

const InformationCell=({data,style,callBack})=>{
  return (
    <TouchableWithoutFeedback onPress={()=>callBack(data)}>
      <View style={styles.information}>
        <View style={styles.infoLeft}>
          <Text style={{color:'#0F0F0F',fontSize:15,lineHeight:20,height:40}} numberOfLines={2}>{data.title}</Text>
          <View style={styles.infoFooter}>
            <Text style={{color:'#A6A6A6',fontSize:11}}>{data.author}</Text>
            <Text style={{color:'#A6A6A6',fontSize:11,marginLeft:20}}>{data.createTime}</Text>
          </View>
        </View>
        <Image style={styles.infoPic} source={{uri:data.thumb}}></Image>
      </View>
    </TouchableWithoutFeedback>
  )
}

class Info_page extends Component{
  constructor(props) {
    super(props);
    this.page={
      pageSize:10,
      pageNum:1,
      totalPage:1
    };
    this.state={
      refreshing:false,
      isMoreLoading:true,
      selectTypeItem:{
        name:'全部',
        id:''
      },
      tabList:[],
      dataList:[]
    }
  }
  componentDidMount() {
    this.getInfoCategory()
    this.getInfoList()
  }

  /*获取分类*/
  getInfoCategory(){
    NetUtil.get('base/home/category',{type:1},(res)=>{
      if(res.code==200){
        let list=res.data;
        list.unshift({id:'',name:'全部'})
        this.setState({tabList:list})
      }
    })
  }

  /*获取资讯*/
  getInfoList(){
    let params={
      categoryId:this.state.selectTypeItem.id,
      pageSize:this.page.pageSize,
      pageNum:this.page.pageNum
    }
    NetUtil.get('base/news/page',params,(res)=>{
      console.log(res)
      if(res.code==200){
        let list=this.state.dataList;
        if(this.page.pageNum==1){
          list=[]
        }
        list=list.concat(res.data.data)
        this.setState({dataList:list,isMoreLoading:res.data.data.length<10?false:true})
      }
      setTimeout(()=>{
        this.setState({refreshing:false})
      },500)
    })
  }


  tabSelectChange(item){
    this.state.selectTypeItem=item;
    this.setState({selectTypeItem:item});
    this.page.pageNum=1;
    this.getInfoList();
  }
  _onRefresh(){
    this.setState({refreshing:true})
    this.page.pageNum=1;
    this.getInfoList()
  }
  async _endReached(){
    if(!this.state.isMoreLoading)return;
    this.page.pageNum++
    this.getInfoList()
  }
  renderFooter(){
    if(this.state.isMoreLoading){
      return(
        <View style={{marginVertical: 10}}>
          <ActivityIndicator/>
        </View>
      )
    }else{
      return(
        <View style={{marginVertical: 10,justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#999999'}}>没有更多了。</Text>
        </View>
      )
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <View>
          <ScrollView style={styles.tabBar} contentContainerStyle={styles.contentContainer} scrollEnabled={true} horizontal={true} showsHorizontalScrollIndicator={false}>
            {this.state.tabList.map((item,index)=>{
              return <TouchableWithoutFeedback onPress={()=>this.tabSelectChange(item)} key={'tab'+index}>
                <View style={[styles.tab,index==0?{marginLeft:14}:null,{backgroundColor:this.state.selectTypeItem.id==item.id?'#E3935410':'#95959510'}]}>
                  <Text style={{height:24,lineHeight:24,textAlign:'center',color:this.state.selectTypeItem.id==item.id?'#E39354':'#959595'}}>{item.name}</Text>
                </View>
              </TouchableWithoutFeedback>
            })}
          </ScrollView>
        </View>
        <FlatList style={styles.table}
                  showsVerticalScrollIndicator={false}
                  onEndReachedThreshold = {0.1} //当距离内容比例不足内容0.1比例时触发onEndReached
                  onRefresh = {this._onRefresh.bind(this)}
                  onEndReached = {this._endReached.bind(this)} //上拉加载数据
                  refreshing = {this.state.refreshing}
                  data={this.state.dataList}
                  keyExtractor={item=>item.id}
                  ListFooterComponent={()=>this.renderFooter()}
                  renderItem={({item})=>(
                    <InformationCell data={item} callBack={(data)=>{
                      RootNavigation.navigate('WebViewPage',{id:data.id,type:1})}}></InformationCell>)}>
        </FlatList>
      </View>
    )
  }
}

export default module=Info_page

const styles=StyleSheet.create({
  container:{
    flex:1,
  },
  tabBar:{
    borderBottomColor:'#F6F6F6',
    borderBottomStyle:'solid',
    borderBottomWidth:1,
    height:44
  },
  contentContainer:{
    paddingTop: 5,
    paddingBottom:15
  },
  tab:{
    height: 24,
    paddingHorizontal:16,
    minWidth:60,
    color:'#959595',
    backgroundColor: '#95959510',
    fontSize:13,
    lineHeight:24,
    textAlign:'center',
    borderRadius:12,
    marginRight:15
  },
  /*资讯*/
  information:{
    flexDirection:'row',
    justifyContent:'flex-start',
    backgroundColor:'#fff',
    height:95,
    paddingLeft:14,
    paddingRight:14,
    paddingTop:15
  },
  infoLeft:{
    flex:1,
    marginRight:22
  },
  infoFooter:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:10
  },
  infoPic:{
    height:65,
    width:97,
    borderRadius:7
  },
  table:{
    // width: '100%',
    // height:height-300
  }
})
